<!-- src/App.vue -->
<template>
  <div id="app">
    <el-container>
      <el-header>
        <el-row type="flex" justify="space-between" align="middle">
          <el-col>
            <el-menu :default-active="activeMenu" mode="horizontal">
              <el-menu-item index="home" @click="goHome">
                {{ $t('nav.home') }}
              </el-menu-item>
              <el-menu-item index="about" @click="goAbout">
                {{ $t('nav.about') }}
              </el-menu-item>
            </el-menu>
          </el-col>
          <el-col>
            <!-- 语言切换下拉 -->
            <el-select
              v-model="currentLocale"
              @change="switchLanguage"
              placeholder="语言"
              size="mini"
              style="margin-right: 20px"
            >
              <el-option label="中文" value="zh" />
              <el-option label="English" value="en" />
            </el-select>
            <!-- 主题色切换示例放在下一节 -->
            <el-select
              v-model="currentTheme"
              @change="switchTheme"
              placeholder="主题色"
              size="mini"
              style="width: 100px"
            >
              <el-option label="蓝色" value="#409EFF" />
              <el-option label="绿色" value="#67C23A" />
              <el-option label="橙色" value="#E6A23C" />
              <el-option label="红色" value="#F56C6C" />
            </el-select>
          </el-col>
        </el-row>
      </el-header>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'App',
  computed: {
    ...mapState(['language', 'themeColor']),
    currentLocale: {
      get() {
        return this.language;
      },
      set(val) {
        // 通过 v-model 更新 language
        console.log(val);
      }
    },
    currentTheme: {
      get() {
        return this.themeColor;
      },
      set(val) {
        // 通过 v-model 更新 themeColor
        console.log(val);
      }
    },
    activeMenu() {
      // 根据当前路由决定高亮，可自行修改
      const routeName = this.$route.name;
      return routeName ? routeName.toLowerCase() : 'home';
    }
  },
  methods: {
    ...mapActions(['changeLanguage', 'changeThemeColor']),
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      this.$router.push('/about');
    },
    switchLanguage(lang) {
      this.changeLanguage(lang);
      this.$i18n.locale = lang;
    },
    switchTheme(color) {
      this.changeThemeColor(color);
    }
  },
  watch: {
    // 监听 store 中 language 的变化，使 i18n 同步（可选）
    language(newLang) {
      this.$i18n.locale = newLang;
    }
  }
};
</script>

<style lang="less">
/* 可在此写全局样式 */
body,
html,
#app {
  height: 100%;
}
</style>
